<template>
  <div class="travel">
    <div class="banner"></div>
    <!-- 面包屑导航 -->
    <breadcrumb></breadcrumb>
    <div class="box-tab">
      <div class="tit-tab">
        <router-link to="/travel/scenic">景点介绍</router-link>
        <router-link to="/travel/route">精选路线</router-link>
        <router-link to="/travel/story">红色故事</router-link>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
.banner {
  width: 100%;
  height: 50vh;
  background: url(../assets/images/banner2.png) no-repeat;
  background-size: cover;
}
.travel {
  background: #f5f5f5;
  box-shadow: 2px 2px 3px #eeeeee;
  overflow: hidden;
}

.box-tab {
  max-width: 1200px;
  margin: 30px auto;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 2px 2px 3px #eeeeee;
}
.box-tab .tit-tab {
  display: flex;
  width: 100%;
  line-height: 35px;
  border-bottom: 2px solid brown;
}
.box-tab .tit-tab a {
  display: inline-block;
  padding: 0 15px;
  font-size: 15px;
  cursor: pointer;
}

.router-link-exact-active {
  color: #f5f5f5;
  background: brown;
}

/* 移动端样式 */
@media screen and (max-width: 767px) {
  .banner {
    display: none;
  }
  .box-tab {
    display: none;
  }
}
</style>